<template>
  <div>
    <div>缴费订单</div>
    <div style="line-height: 0px">
      <div style="text-align: left" class="payMR">
        <el-row :gutter="10">
          <el-col :span="24">
            <span>账单编号：</span>
            <el-input
              v-model="payMentVo.billNum"
              style="width: 130px"
              placeholder="请输入账单编号"
              @blur="getBNum($event)"
              suffix-icon="el-icon-date"
              size="mini"
            ></el-input>

            <span style="margin-left: 30px">所属房屋：</span>
            <el-input
              v-model="payMentVo.tHouse"
              style="width: 130px"
              placeholder="请输入房屋地址"
              @blur="getTHouse($event)"
              suffix-icon="el-icon-date"
              size="mini"
            ></el-input>

            <span style="margin-left: 30px">业主姓名：</span>
            <el-input
              v-model="payMentVo.lName"
              style="width: 130px"
              placeholder="请输入业主姓名"
              @blur="getLName($event)"
              suffix-icon="el-icon-date"
              size="mini"
            ></el-input>

            <span style="margin-left: 30px">账目类别：</span>
            <el-select
              v-model="value"
              placeholder="请选择"
              @change="getccId($event)"
              style="width: 100px"
              size="mini"
            >
              <el-option
                v-for="item in chargeccs"
                :key="item.id"
                :label="item.chargeProject"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <span style="margin-left: 30px">账单状态: </span>
            <el-select
              v-model="value1"
              placeholder="请选择"
              @change="getbillSta($event)"
              style="width: 100px"
              size="mini"
              valie="0"
            >
              <el-option
                v-for="item in paybilStas"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="8">
            <el-button
              type="primary"
              @click="doDownload"
              icon="el-icon-download"
              round
            >导出Excel</el-button>
            <el-button type="primary" round @click="showAddPay()"
              >增加缴费订单</el-button
            >
          </el-col>
        </el-row>

        <el-table
          ref="filterTable"
          :data="tableData"
          style="width: 100%; height: 100%"
          :header-cell-style="{ 'text-align': 'center' }"
          @sort-change="getSortable($event)"
          v-loading="loading"
          element-loading-text="拼命加载中"
        >
          <el-table-column prop="id" label="ID" width="40"> </el-table-column>
          <el-table-column prop="billNumber" label="账单编号" width="155">
          </el-table-column>
          <el-table-column
            prop="landlord.name"
            label="业主姓名"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="room.buildingNum" label="所属房屋" width="190">
            <template slot-scope="scope">
              {{ scope.row.room.buildingNum }}- {{ scope.row.room.unit }}-
              {{ scope.row.room.floor }}楼 {{ scope.row.room.roomNum }}号
            </template>
          </el-table-column>
          <el-table-column
            prop="chargeConfig.chargeProject"
            label="账单类目"
            width="80"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="billingCycle"
            label="计费周期"
            width="150"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.billingCycle }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="amountReceivable" label="实收金额" width="80">
            <template slot-scope="scope">
              ¥{{ towNumber(scope.row.amountReceivable) }}
            </template>
          </el-table-column>
          <el-table-column
            prop="collectionTime"
            label="缴费时间"
            sortable="custom"
            width="160"
          >
          </el-table-column>
          <el-table-column
            prop="billingStatus"
            label="账单状态"
            width="80"
            align="center"
          >
            <template slot-scope="scope">
              <span
                v-if="scope.row.billingStatus === '1'"
                style="color: #37b328"
                ><el-tag type="success">已支付</el-tag></span
              >
              <span
                v-if="scope.row.billingStatus === '2'"
                style="color: #b30000"
                ><el-tag type="danger">未支付</el-tag></span
              >
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="增加订单"
          :visible.sync="dialogFormVisible"
          append-to-body
          @open="open()"
        >
          <el-form>
            <el-form-item label="选择业主" :label-width="formLabelWidth">
              <el-select
                v-model="val7"
                filterable
                placeholder="请选择"
                @change="getaddlandlordId($event)"
              >
                <el-option
                  v-for="item in landlords"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择房屋" :label-width="formLabelWidth">
              <el-select
                v-model="val6"
                placeholder="请选择"
                filterable
                @change="getaddroomId($event)"
              >
                <el-option
                  v-for="item in rooms"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择账目类型" :label-width="formLabelWidth">
              <el-select
                v-model="val5"
                placeholder="请选择"
                @change="getaddccId($event)"
              >
                <el-option
                  v-for="item in chargeccs"
                  :key="item.id"
                  :label="item.chargeProject"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择计费周期" :label-width="formLabelWidth">
              <el-date-picker
                v-model="val4"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="selectTime"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyyMMdd"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="应收金额" :label-width="formLabelWidth">
              <el-input
                v-model="payMentVo.payMentRecords.amountReceivable"
                autocomplete="off"
                placeholder="请输入应收金额"
              ></el-input>
            </el-form-item>
            <el-form-item label="选择支付方式" :label-width="formLabelWidth">
              <el-select
                v-model="val2"
                placeholder="请选择"
                @change="getmmId($event)"
              >
                <el-option
                  v-for="item in paymms"
                  :key="item.id"
                  :label="item.method"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="选择账单状态" :label-width="formLabelWidth">
              <el-select
                v-model="val1"
                placeholder="请选择"
                @change="getaddbillStaId($event)"
              >
                <el-option
                  v-for="item in paybilStas"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addPayMent">确 定</el-button>
          </div>
        </el-dialog>
        <div class="block">
          <el-pagination
            :background="true"
            @size-change="sizeChange"
            @current-change="currentPayList"
            :current-page="payMentVo.pageBean.currPage"
            :page-sizes="pageSizes"
            :page-size="payMentVo.pageBean.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="payMentVo.pageBean.totalNum"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      payMentVo: {
        billNum: "",
        tHouse: "",
        lName: "",
        ccId: 0,
        pmId: 0,
        bilSta: "",
        sort: "",
        pageBean: {
          currPage: 1,
          pageSize: 5,
          totalPages: 0,
          totalNum: 0,
        },
        payMentRecords: {
          amountReceivable: "",
          billingCycle: "",
          billingStatus: "",
          payMentMethod: {
            id: 0,
          },
          chargeConfig: {
            id: 0,
          },
          room: {
            id: 0,
          },
          landlord: {
            id: 0,
          },
        },
      },
      pageSizes: [5, 10, 20, 50],
      paybilStas: [
        {
          id: "1",
          name: "已支付",
        },
        {
          id: "2",
          name: "未支付",
        },
      ],
      chargeccs: [
        {
          id: "0",
          chargeProject: "黄金糕",
        },
      ],
      paymms: [
        {
          id: 0,
          method: "全部",
        },
      ],
      landlords: [
        {
          id: "1",
          name: "tom",
        },
      ],
      rooms: [
        {
          id: "",
          name: "",
        },
      ],
      tableData: [],
      value: "全部",
      value1: "全部",
      val1: "选择账单状态",
      val2: "选择支付方式",
      val3: "选择日期时间",
      val4: "选择计费周期",
      val5: "选择账目类型",
      val6: "选择房屋",
      val7: "选择业主",
      loading: true,
      dialogFormVisible: false,
      formLabelWidth: "120px",
    };
  },
  created() {
    this.currentPayList(this.payMentVo.pageBean.currPage);
    this.getConfigList();
    this.getPayMMList();
    //this.getPayLandlordList();
  },
  methods: {
    //增加缴费订单
    addPayMent() {
      console.log(this.payMentVo.payMentRecords);
      this.$axios
        .post("http://localhost:8080/api/v1/pay/add", this.payMentVo.payMentRecords)
        .then((r) => {
          console.log(r.data);
          this.dialogFormVisible = false;
        });
    },
    //展示增加订单弹出窗
    showAddPay() {
      this.dialogFormVisible = true;
    },
    //open
    open() {
      //$nextTick() 该钩子函数执行时所有的DOM 挂载和渲染都已经完成， 此时在该钩子函数中进行任何操作都不会有问题。
      this.$nextTick(() => {
        this.getPayLandlordList();
        this.getPayRoomList();
      });
    },
    //获取增加订单值
    getaddlandlordId(e) {
      //业主
      console.log("业主id: ", e);
      this.payMentVo.payMentRecords.landlord.id = e;
    },
    getaddroomId(e) {
      //房屋
      console.log("房屋Id: ", e);
      this.payMentVo.payMentRecords.room.id = e;
    },
    getaddccId(e) {
      //账目类型
      console.log("账目类型id: ", e);
      this.payMentVo.payMentRecords.chargeConfig.id = e;
    },
    selectTime(val) {
      //计费周期
      console.log("计费周期: ", val[0] + '-' + val[1]);
      let bctime = val[0] + '-' + val[1]
      this.payMentVo.payMentRecords.billingCycle = bctime;
    },
    getmmId(e) {
      //支付方式
      console.log("支付方式id: ", e);
      this.payMentVo.payMentRecords.payMentMethod.id = e;
    },
    getaddbillStaId(e) {
      //状态
      console.log("状态id: ", e);
      this.payMentVo.payMentRecords.billingStatus = e;
    },

    //排序
    getSortable(e) {
      //console.log(e.order);
      this.payMentVo.sort = e.order;
      this.payList(this.payMentVo);
    },
    //导出Excel
    doDownload() {
      this.$axios
        .post("/pay/download", this.payMentVo, {
          responseType: "blob",
        })
        .then((flow) => {
          console.log(flow.data);
          if (!flow.data) return;
          const blob = new Blob([flow.data]);
          const blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.style.display = "none";
          a.download = "payMents" + Date.now() + ".xlsx"; // 自定义下载的文件名
          a.href = blobUrl;
          a.click();
        });
    },
    //获得账单类目列表
    getConfigList() {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/getConfigList")
        .then((r) => {
          //console.log(r.data);
          this.chargeccs = r.data.data;
        });
    },
    //获取业主列表
    getPayLandlordList() {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/getPayLandlordList")
        .then((r) => {
          //console.log(r.data);
          this.landlords = r.data.data;
        });
    },
    //获取房屋列表
    getPayRoomList(){
      this.$axios
        .post("http://localhost:8080/api/v1/pay/getPayRoomList")
        .then((r) => {
          console.log(r.data);
          this.rooms = r.data.data;
        });
    },
    //获取账单类目id
    getccId(value) {
      //console.log("账单: ", value); //获取下拉框id 选项1
      this.payMentVo.ccId = value;
      this.payList(this.payMentVo);
    },
    //获取账单状态
    getbillSta(value) {
      console.log("状态: ", value);
      this.payMentVo.bilSta = value;
      this.payList(this.payMentVo);
    },
    //获取业主姓名
    getLName(e) {
      this.payMentVo.lName = e.target.value;
      this.payList(this.payMentVo);
    },
    //获取支付类型列表
    getPayMMList() {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/getPayMMList")
        .then((r) => {
          //console.log(r.data);
          this.paymms = r.data.data;
        });
    },
    //模糊查询账单编号
    getBNum(e) {
      //console.log("billNum: ",e.target.value); //获取输入框值
      this.payMentVo.billNum = e.target.value;
      this.payList(this.payMentVo);
    },
    //模糊查询房屋
    getTHouse(e) {
      //console.log("tHouse: ",e.target.value); //获取输入框值
      this.payMentVo.tHouse = e.target.value;
      this.payList(this.payMentVo);
    },
    //当前页
    currentPayList(value) {
      this.payMentVo.pageBean.currPage = value;
      this.payList(this.payMentVo);
    },
    //获取缴费记录数据
    payList(payMentVo) {
      this.$axios
        .post("http://localhost:8080/api/v1/pay/list", payMentVo)
        .then((r) => {
          //console.log(payMentVo);
          //console.log(r.data.data);
          this.tableData = r.data.data.data;
          this.payMentVo.pageBean.totalNum = r.data.data.totalNum;
          this.loading = false;
        });
    },
    //每页数据
    sizeChange(val) {
      this.payMentVo.pageBean.pageSize = val;
      this.$axios
        .post("http://localhost:8080/api/v1/pay/list", this.payMentVo)
        .then((r) => {
          //console.log(r.data.data);
          this.tableData = r.data.data.data;
          this.payMentVo.pageBean.totalNum = r.data.data.totalNum;
        });
    },
    //小数后两位
    towNumber(val) {
      return val.toFixed(2);
    },
  },
};
</script>
  <style>
.payMR span {
  font-size: 10px;
}
</style>